<template>
  <div class="wh-login">
    <div class="wh-login-inner">
      <div class="content">
        <h1>
          <span>快速轻松翻译您的</span>
          外语文档
        </h1>
        <p>让您拥有更多的时间专注于创造本身</p>
      </div>
      <div class="sign-in">
        <div class="inner">
          <h2>账号密码</h2>
          <el-form ref="ruleFormRef" size="large" :model="ruleForm" :rules="rules" label-width="0">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item prop="name">
              <el-input v-model="ruleForm.password" />
            </el-form-item>
            <el-form-item>
              <div class="df jc-sb" style="width: 100%">
                <el-checkbox v-model="remember" label="15天内自动登录" size="large" />
                <el-button link>忘记密码？</el-button>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 100%" type="primary" @click="$router.push('/home')">登 录</el-button>
            </el-form-item>
            <el-form-item style="margin-bottom: 0">
              登录即注册且代表您同意
              <el-button link type="primary">服务协议</el-button>
            </el-form-item>
          </el-form>
          <p>更多登录方式</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const ruleForm = reactive({
  username: 'WH-love',
  password: '5201314'
})
const rules = reactive({})
const remember = ref(false)
</script>

<style scoped lang="scss">
.wh-login {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/images/login/bg.png') no-repeat left center / cover;

  .wh-login-inner {
    width: 100vw;
    height: 100vh;
    //position: fixed;
    //right: calc(252 / 1920 * 100vw);
    //top: 50%;
    //transform: translateY(-50%);
    display: flex;

    .content {
      position: fixed;
      left: 511px;
      top: calc(420 / 1080 * 100vh);
      //padding-top: 200px;
      //padding-right: 150px;

      h1 {
        white-space: nowrap;
        font-size: 40px;
        font-weight: 600;
        color: #324153;
        display: flex;

        span {
          color: #489bf9;
        }
      }

      p {
        white-space: nowrap;
        letter-spacing: 10px;
        margin-top: 20px;
        font-size: 20px;
        font-weight: 200;
        color: #324153;
      }
    }

    .sign-in {
      position: fixed;
      right: calc(260 / 1920 * 100vw);
      top: 50%;
      transform: translateY(-50%);
      width: 514px;
      height: 594px;
      background: #fff;
      box-shadow: -2px 12px 100px 20px rgba(210, 219, 232, 0.25);
      border-radius: 18px;
      border: 3px solid #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .inner {
        width: 360px;

        h2 {
          text-align: left;
          font-size: 28px;
          font-weight: 600;
          color: #373737;
          padding-bottom: 32px;
        }

        p {
          margin-top: 40px;
          font-size: 16px;
          font-weight: 400;
          color: #c8ced9;
          height: 22px;
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: center;

          &::before,
          &::after {
            content: '';
            width: 114px;
            height: 1px;
            background-color: #d9dee6;
          }
        }
      }
    }
  }
}
</style>
